<template>
  <div class="home">
    <!-- 左侧导航栏 -->
    <ul class="left">
      <a href="javascript:;">
        <li @click="go(index)" v-for="(item, index) in list" :key="index">
          {{ item.name }}
        </li>
      </a>
    </ul>

    <!-- 右侧内容 -->
    <div class="right">
      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {
  //  Tab
  },
  data() {
    return {
      list: [
        { id: 1, name: "推荐", path: "./Rec" },
        { id: 2, name: "音乐馆", path: "./MusicHall" },
        { id: 3, name: "视频", path: "./Video" },
        { id: 4, name: "电台", path: "./Radio" },
        { id: 5, name: "我喜欢", path: "./Like" },
        { id: 6, name: "最近播放" , path: "./Latest"},
      ],
    };
  },
  methods: {
    // 点击替换路由地址
    go(index) {
      this.$router.push(`${this.list[index].path}?id=${this.list[index].id}`);
    },
  },
};
</script>
<style scoped>
.home {
  width: 800px;
  height: 480px;
  display: flex;

}
.left {
  width: 100px;
  height: 100%;
  /* border-right: 1px solid black; */
  background: #F8E0AF;
}
.left a li {
  height: 80px;
  line-height: 80px;
  width: 100%;
  text-align: center;
}
.left a li:hover {
  background: rgba(213, 211, 211, 0.429);
}
.right {
  width: calc(100% - 100px);
  height: 100%;
  background: #FBEAC0;
}
</style>